<template>
    <div class="office">
        <!-- 职级分布 -->
        <div class="rabkDistribution">
          <div class="border">
            <span>职级分布</span>
          </div>
          <!-- 标题 -->
          <div class="title">
            <ul class="list">
              <li class="li-th">板块</li>
              <li class="li-th" v-for="(res,index1) in rankData[0].list" :key="index1">{{res.name}}</li>
            </ul>
          </div>
          <!-- 内容 -->
          <div class="content">
            <ul class="list" v-for="(item,index) in rankData" :key="index">
              <li class="li-td">{{item.name}}</li>
              <li class="li-td" v-for="(res,index1) in item.list" :key="index1">{{res.value}}</li>
            </ul>
          </div>
        </div>
        <!-- 职级分布比例 -->
        <div class="rabkDistribution-ratio">
          <div class="border">
            <span>职级分布比例</span>
          </div>

          <div class="top">
            <!-- 各版块 -->
            <div class="plate">
              <block-title><span slot="title">各版块</span></block-title>
              <!-- 图表位置 -->
              <div class="chart">
                <bar-chart-pile-up v-model="pileUpData" :option="plateOption" :chartStyle="'min-height:240px;'"></bar-chart-pile-up>
              </div>
            </div>
            <em class="line"></em>
            <!-- 整体 -->
            <div class="whole">
              <block-title><span slot="title">整体</span></block-title>
              <!-- 图表位置 -->
              <div class="chart">
                <pie-chart v-model="overallData" :option="shopOrderOption" :chartStyle="'min-height:400px;'"></pie-chart>
              </div>
            </div>
          </div>

          <div class="bot">
            <!-- 性别分布 -->
            <div class="sex">
              <block-title><span slot="title">性别分布</span></block-title>
              <div class="chart">
                <sex-ball v-model="locationUsing"></sex-ball>
              </div>
            </div>
            <em class="line"></em>

            <!-- 学历分布 -->
            <div class="education">
              <block-title><span slot="title">学历分布</span></block-title>
              <div class="chart">
                <pie-chart v-model="educationData" :option="educationOption" :chartStyle="'min-height:240px;'"></pie-chart>
              </div>
            </div>
            <em class="line"></em>

            <!-- 司龄分布 -->
            <div class="seniority">
              <block-title><span slot="title">司龄分布</span></block-title>
              <div class="chart">
                <pie-chart v-model="seniorityArr" :option="seniorityOption" :chartStyle="'min-height:240px;'"></pie-chart>
              </div>
              
            </div>
            <em class="line"></em>

            <!-- 年龄分布 -->
            <div class="age">
              <block-title><span slot="title">年龄分布</span></block-title>
              <div class="chart">
                <ball-chart v-model="ageDistributionArr"></ball-chart>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import pieChart from "@/components/Charts/pieChart";
import barChartPileUp from "@/components/Charts/barChartPileUp";
import sexBall from "@/components/Charts/sexBall.vue";
import ballChart from "@/components/Charts/ballChart.vue";
// import barCharts from "@/components/Charts/barCharts";
// import lineChartss from "@/components/Charts/lineChartss";
// import lineChart from "@/components/Charts/lineChart";
// import bgLayOut from "@/components/bgLayOut/index";
// import chartLayOut from "@/components/Charts/chartLayOut";
import {
  HumanResourcesGetDataByDoubleTarget,
  GetDataByTarget
} from "@/api/rl/index";
import blockTitle from "@/components/rl/blockTitle";

export default {
  props: {
    // groupPlate: {
    //   type: String,
    //   default: () => {
    //     return [];
    //   }
    // }
  },
  name: "sellAnalysis",
  components: {
    blockTitle,
    barChartPileUp,
    sexBall,
    ballChart,
    // bgLayOut,
    // barCharts,
    pieChart
    // lineChart,
    // lineChartss,
    // chartLayOut
  },
  watch: {
    // groupPlate(newValue, oldValue) {
    //   this.fetchData();
    // }
  },
  data() {
    return {
      ageDistributionArr: [], // 年龄分布
      testData: {
        list: [
          {
            name: "男",
            value: 3200
          },
          {
            name: "女",
            value: 2142
          }
        ],
        total: 12342
      }, // 测试数据
      locationUsing: {}, // 库位使用数据
      // 司龄分布
      seniorityArr: [],
      seniorityOption: {
        color: ["#EE3F86", "#29AAE1", "#FAAF3B", "#22B473", "#435EFF"],
        radius: ["35%", "50%"],
        center: ["50%", "30%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}"
            // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      // 学历分布
      educationData: [],
      educationOption: {
        color: ["#EE3F86", "#29AAE1", "#FAAF3B", "#22B473"],
        radius: ["35%", "50%"],
        center: ["50%", "30%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}"
            // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      // 整体
      overallData: [],
      shopOrderOption: {
        color: ["#7F47DC", "#EE3F86", "#FAAF3B"],
        radius: ["35%", "50%"],
        center: ["50%", "30%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}"
            // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      pileUpData: [],
      plateOption: {
        grid: {
          top: 0,
          left: "13%"
        },
        legend: {
          right: 0,
          bottom: 0,
          textStyle: {
            color: "#29AAE1"
          }
        },
        color: ["#29AAE1", "#22B473", "#FAAF3B"]
      },
      rankData: [
        {
          name: "高层",
          list: [
            {
              name: "整体",
              value: 0
            },
            {
              name: "集团公司",
              value: 0
            },
            {
              name: "地产",
              value: 0
            },
            {
              name: "房联行(郑州)",
              value: 0
            },
            {
              name: "房联行(洛阳)",
              value: 0
            },
            {
              name: "物业",
              value: 0
            },
            {
              name: "融媒",
              value: 0
            },
            {
              name: "产业园",
              value: 0
            },
            {
              name: "浩德钢圈",
              value: 0
            },
            {
              name: "金控",
              value: 0
            },
            {
              name: "浩德资本",
              value: 0
            }
          ]
        },
        {
          name: "中层",
          list: [
            {
              name: "整体",
              value: 0
            },
            {
              name: "集团公司",
              value: 0
            },
            {
              name: "地产",
              value: 0
            },
            {
              name: "房联行(郑州)",
              value: 0
            },
            {
              name: "房联行(洛阳)",
              value: 0
            },
            {
              name: "物业",
              value: 0
            },
            {
              name: "融媒",
              value: 0
            },
            {
              name: "产业园",
              value: 0
            },
            {
              name: "浩德钢圈",
              value: 0
            },
            {
              name: "金控",
              value: 0
            },
            {
              name: "浩德资本",
              value: 0
            }
          ]
        },
        {
          name: "基层",
          list: [
            {
              name: "整体",
              value: 0
            },
            {
              name: "集团公司",
              value: 0
            },
            {
              name: "地产",
              value: 0
            },
            {
              name: "房联行(郑州)",
              value: 0
            },
            {
              name: "房联行(洛阳)",
              value: 0
            },
            {
              name: "物业",
              value: 0
            },
            {
              name: "融媒",
              value: 0
            },
            {
              name: "产业园",
              value: 0
            },
            {
              name: "浩德钢圈",
              value: 0
            },
            {
              name: "金控",
              value: 0
            },
            {
              name: "浩德资本",
              value: 0
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 职级分布数据请求
    async fetchRankData() {
      try {
        var params = {
          queryType: "10002",
          innerQueryType: "10021"
        };
        var res = await HumanResourcesGetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "rankData", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async fetchPileUpData() {
      try {
        var params = {
          queryType: "10002",
          innerQueryType: "10011"
        };
        var res = await HumanResourcesGetDataByDoubleTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "pileUpData", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 整体数据获取
    async fetchOverallData() {
      try {
        var params = {
          queryType: "10002"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "overallData", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 学历分布
    async fetchEducationlData() {
      try {
        var params = {
          queryType: "10008"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "educationData", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 司龄分布
    async fetchSeniorityArr() {
      try {
        var params = {
          queryType: "10007"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "seniorityArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 性别分布
    async fetchLocationUsing() {
      try {
        var params = {
          queryType: "10005"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          var tot = 0;
          result.forEach(element => {
            tot += element.value;
          });
          this.$set(this, "locationUsing", {
            list: result,
            total: tot
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 年龄分布
    async fetchAgeDistributionArr() {
      try {
        var params = {
          queryType: "10006"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "ageDistributionArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchRankData();
      this.fetchPileUpData();
      this.fetchOverallData();
      this.fetchEducationlData(); // 学历数据
      this.fetchSeniorityArr(); // 司龄分布
      this.fetchLocationUsing(); // 性别分布
      this.fetchAgeDistributionArr(); // 年龄分布
    }
  }
};
</script>

<style lang="scss">
@import "../../../../../styles/base/_parameters";
.age {
  .chart {
    div {
      & > div {
        display: flex;
        flex-direction: column;
        p {
          height: 15px;
          font-size: 12px;
          &:nth-of-type(1) {
            white-space: nowrap;
          }
          &:nth-of-type(2) {
            @include din(16px);
          }
        }
      }
    }
  }
}
</style>

<style scoped lang="scss">
@import "../../../../../styles/base/_parameters";
$color: #29aae1;
$titleColor: #faaf3b;
$contentColor: #22b473;
$lineBack: rgba(#29aae1, 0.2);

.office {
  @include absoluteAllSides(33, 0, 26, 0, 1);

  .border {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 55px;
    line-height: 55px;
    color: $color;
    font-size: 22px;
    background: url("../../../../../../static/img/rl/border.png") left center
      no-repeat;
    background-size: 100%;
    span {
      position: absolute;
      left: 120px;
      z-index: 1;
    }
  }

  // 职级分布
  .rabkDistribution {
    // 列表标题
    .title {
      padding-left: 38px;
      padding-right: 36px;
      margin-top: 8px;
      .list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: rgba(0, 0, 0, 0.3);
        .li-th {
          width: 10%;
          color: $titleColor;
          @include blod(16px);
          text-align: center;
        }
      }
    }
    // 列表内容
    .content {
      padding-left: 38px;
      padding-right: 36px;
      margin-top: 8px;
      .list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 10px;
        .li-td {
          width: 10%;
          color: $contentColor;
          @include din(20px);
          text-align: center;
          &:nth-of-type(1) {
            font-size: 16px;
            font-weight: normal;
          }
        }
        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }
      }
    }
  }
  // 职级分布比例
  .rabkDistribution-ratio {
    margin-top: 35px;
    .border {
      background: url("../../../../../../static/img/rl/border2.png") left center
        no-repeat;
      background-size: 100%;
    }
    // 各版块 / 整体
    .top {
      display: flex;
      align-items: center;
      padding-left: 38px;
      padding-right: 36px;
      margin-top: 20px;
      .plate,
      .whole {
        width: calc(100% / 2 - 40px);
      }
      .line {
        width: 1px;
        height: 230px;
        margin: 0 40px;
        background-color: $lineBack;
      }
      .chart {
        height: 224px;
        margin-top: 20px;
      }
    }
    // 性别分布 / 学历分布 / 司龄分布 / 年龄分布
    .bot {
      display: flex;
      align-items: center;
      padding-left: 38px;
      padding-right: 36px;
      margin-top: 45px;
      em {
        display: inline-block;
        width: 1px;
        height: 156px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: $lineBack;
      }
      .sex,
      .education,
      .seniority,
      .age {
        width: calc(100% / 4 - 28px);
      }
      .chart {
        position: relative;
        height: 154px;
        margin-top: 20px;
      }
    }
  }
}
</style>
